<!--
  手写板
-->
<template lang="pug">
  div.handwriting-board
    canvas#canvas.canvas(:width="width" :height="height")
    canvas#canvas2(width="502px" height="75px")
    el-button(@click="onClearCanvas") 重写
    el-button(@click="onConfirm") 确认
</template>

<script type="text/ecmascript-6">
  export default {
    props: {
      width: {
        type: Number,
        default: 400
      },
      height: {
        type: Number,
        default: 200
      },
      brushColor: {
        type: String,
        default: `#000`
      },
      lineWidth: {
        type: Number,
        default: 1
      }
    },
    data() {
      return {
        isMouseDown: false,
        lastLoc: {x: 0, y: 0}
      }
    },
    mounted() {
      this.$nextTick(() => {
        this.canvas = document.getElementById('canvas')
        this.context = this.canvas.getContext('2d')
        this.canvas2 = document.getElementById('canvas2')
        this.context2 = this.canvas2.getContext('2d')
        let img = new Image()
        img.src = '/static/images/logo.png'
        img.onload = () => {
          this.context2.drawImage(img, 0, 0)
        }
        this.canvas.onmousedown = (e) => {
          e.preventDefault()
          this.beginStroke({x: e.clientX, y: e.clientY})
        }
        this.canvas.onmouseup = (e) => {
          e.preventDefault()
          this.endStroke()
        }
        this.canvas.onmouseout = (e) => {
          e.preventDefault()
          this.endStroke()
        }
        this.canvas.onmousemove = (e) => {
          e.preventDefault()
          if (this.isMouseDown) {
            this.moveStroke({x: e.clientX, y: e.clientY})
          }
        }
      })
    },
    methods: {
      onConfirm() {
        let img = new Image()
        img.src = this.canvas.toDataURL('image/png')
        img.onload = () => {
          this.context2.drawImage(img, 0, 0)
        }
        this.$emit('confirm', {state: true})
      },
      onClearCanvas() {
        this.context.clearRect(0, 0, this.width, this.height)
      },
      windowToCanvas(x, y) {
        let bbox = this.canvas.getBoundingClientRect()
        return {x: Math.round(x - bbox.left), y: Math.round(y - bbox.top)}
      },
      moveStroke(point) {
        this.curLoc = this.windowToCanvas(point.x, point.y)
        this.context.beginPath()
        this.context.moveTo(this.lastLoc.x, this.lastLoc.y)
        this.context.lineTo(this.curLoc.x, this.curLoc.y)
        this.context.strokeStyle = this.brushColor
        this.context.lineWidth = this.lineWidth
        this.context.lineCap = `round`
        this.context.lineJoin = `round`
        this.context.stroke()
        this.lastLoc = this.curLoc
      },
      beginStroke(point) {
        this.isMouseDown = true
        this.lastLoc = this.windowToCanvas(point.x, point.y)
      },
      endStroke() {
        this.isMouseDown = false
      }
    }
  }
</script>

<style scoped lang="stylus" rel="stylesheet/stylus">
  .handwriting-board
    display inline-block
    border-bottom 1px solid #000000
    width auto
    height auto
    background-color #ffffff

    .canvas
      border 1px solid #000000
</style>
